<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =800;
			 var context = canvas.getContext("2d");//2d环境
			 
			 var  balls=[];
			for(var i =0;i<100;i++){
			var R =Math.floor(Math.random()*255);
			var G =Math.floor(Math.random()*255);
			var B =Math.floor(Math.random()*255);
			var radius =Math.random()*50+20;
			aBall ={
				color:"rgb("+R+","+G+","+B+")",
				radius:radius,
				x:Math.random()*(canvas.width-2*radius)+radius,
				y:Math.random()*(canvas.height-2*radius)+radius,
				vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),
				vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))
			/*	1、 Math.pow(x,y)-- 返回底数的指定次幂
					pow是power的缩写，中文"幂"的意思
					
					pow函数返回值
					返回以x的y次幂，等同于xy的数值表达式
					
					如果pow的参数过大而引起浮点溢出，返回Infinity
					
					2、Math.sqrt  返回x的平方根
					
					sqrt函数返回值
					返回x的平方根
					
					如果x小于0，返回NaN*/
			}
			balls[i]=aBall;
			 }
			/*setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作 略*/
			setInterval(
				function(){
					draw(context);
					update(canvas.width,canvas.height);
					
				},50
				
			);
			//绘制图
			function draw(cxt){
				var canvas = cxt.canvas;
				cxt.clearRect(0,0,canvas.width,canvas.height);//清空
				
				for (var i=0;i<balls.length;i++) {
					cxt.globalCompositeOperation="lighter";
					cxt.globalAlpha=0.7;
					cxt.fillStyle =balls[i].color;
					cxt.beginPath();
					cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2);
					cxt.closePath();
					cxt.fill();
				}
			}
			//碰撞检测
			function update(canvasWidth,canvasHeight){
				
				for(var i=0;i<balls.length;i++){
					balls[i].x +=balls[i].vx;
					balls[i].y +=balls[i].vy;
					if(balls[i].x-balls[i].radius<=0){
						balls[i].vx =-balls[i].vx;
						balls[i].x =balls[i].radius;
					}if(balls[i].x+balls[i].radius>=canvasWidth){
						balls[i].vx =-balls[i].vx;
						balls[i].x =canvasWidth-balls[i].radius;
					}if(balls[i].y-balls[i].radius<=0){
						balls[i].vy =-balls[i].vy;
						balls[i].y =balls[i].radius;
					}if(balls[i].y+balls[i].radius>=canvasHeight){
						balls[i].vy =-balls[i].vy;
						balls[i].y=canvasHeight-balls[i].radius;
					}
				}
				
				
			}
	</script>
</html>
